<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html rsf:id="html" xmlns="http://www.w3.org/1999/xhtml" xmlns:rsf="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"/>
    <style rsf:id="iconstyle" type="text/css">
    </style>
    <script rsf:id="scr=portal-matter" src="/library/js/headscripts.js"></script>
    <script src="/lessonbuilder-tool/js/SakaiRSFWidgets.js" rsf:id="fckScript"></script>
    <script src="../js/rsf.js"></script>
    <script src="/library/js/spinner.js" type="text/javascript"></script>
    <link type="text/css" href="/library/webjars/jquery-ui-themes/1.12.1/smoothness/jquery-ui.min.css" rel="stylesheet" />
    <link rsf:id="scr=portal-matter" href="/library/skin/tool_base.css" type="text/css" rel="stylesheet" media="all" />
    <link rsf:id="scr=portal-matter" href="/library/skin/default-skin/tool.css" type="text/css" rel="stylesheet" media="all" />
    <link rel="stylesheet" rsf:id="customCSS" type="text/css" />

    <title rsf:id="msg=simplepage.checklist"></title>
</head>
<body rsf:id="scr=sakai-body">
<script>includeLatestJQuery('Checklist.html');</script>

<div class="portletBody">

    <p rsf:id="debugstuff"> junk </p>

    <form rsf:id="page_form" class="checklistForm">
        <input type="hidden" rsf:id="csrf"/>
	<input type="hidden" rsf:id="add-before" id="add-before" />
        <div rsf:id="instructions">Enter your page content below</div>

        <div class="ui-widget" id="checklist-error-container" style="display: none;">
            <div class="sak-banner-error" id="checklist-error">
            </div>
        </div>

        <div class="page-header">
            <strong><span class="me-2" rsf:id="title-label"></span></strong><span rsf:id="page-title"></span>
        </div>

        <div>
            <div class="form-group">
                <span class="reqStar">*</span>
                <label rsf:id="msg=simplepage.new-checklist-title" for="name"></label>
                <input class="form-control" required="true" rsf:id="name" id="name"/>
            </div>
            <div class="form-group">
                <input class="form-check-input" type="checkbox" rsf:id="isNameHidden" id="isNameHidden"/><label rsf:id="nameHidden-label" for="isNameHidden"></label>
            </div>
            <div class="form-group">
                <label rsf:id="msg=simplepage.new-checklist-description" for="description"></label>
                <textarea class="form-control" rsf:id="description" id="description" rows="6"></textarea>
            </div>

            <hr />
            <input type="hidden" rsf:id="attributeString" id="attributeString"/>

            <fieldset>
                <legend class="no-border"><h3 rsf:id="msg=simplepage.add-checklist-item"></h3></legend>
                <div id="checklistItems">
                    <li id="copyableChecklistItemDiv" style="display: none;" class="ui-state-default">
                        <span class="fa fa-sort handle checklist-icons"></span>
                        <input type="hidden" rsf:id="checklist-item-complete" />
                        <input type="hidden" rsf:id="checklist-item-id" class="checklist-item-id" />
                        <input type="hidden" rsf:id="checklist-item-link" class="checklist-item-link" id="checklist-item-link-" />
                        <label for="checklist-item-name" ></label><span rsf:id="msg=simplepage.checklist-item-name" id="checklist-item-name" class="lb-offscreen"></span>
                        <input type="text" rsf:id="checklist-item-name" name="checklist-item-name" class="checklist-item-name" />
                        <div class="actionContainer">
                            <button type="button" id="external-link-" class="btn btn-transparent external-link"><span class="fa fa-link"><span class="sr-only" rsf:id="msg=simplepage.checklist.external.link" /></span></button>
                            <button type="button" id="external-link-unlink-" class="btn btn-transparent external-unlink"><span class="fa fa-chain-broken"><span class="sr-only" rsf:id="msg=simplepage.checklist.external.unlink" /></span></button>
                            <button type="button" class="btn btn-transparent deleteItemLink"><span class="fa fa-trash" aria-hidden="true" rsf:id="checklist-item-del"></span></button>
                        </div>
                    </li>
                    <ul id="createdChecklistItems"></ul>
                </div>
                <button id="addChecklistItemButton" class="button_color">
                    <span aria-hidden="true" class="fa fa-plus-circle"></span>
                    <span rsf:id="msg=simplepage.addChecklistItem"></span>
                </button>
            </fieldset>
        </div>

        <hr />
        <h3><span rsf:id="msg=simplepage.optional.settings" /></h3>
        <div id="additionalSettings">
            <h3 class="checklist-settings-header"><span rsf:id="msg=simplepage.appearance.settings" /></h3>
            <div id="stylingstuff" class="stylingstuff">
                <div class="form-group">
                    <label for="indent-level"><span rsf:id="msg=simplepage.indent.level"/></label>
                    <select class="form-control" rsf:id="indent-level" name="indent-level" id="indent-level"/>
                </div>
                <div class="form-group">
                    <label for="customCssClass" rsf:id="custom-css-label"></label>
                    <input rsf:id="customCssClass" type="text" id="customCssClass" length="30" maxlength="99" class="form-control"/>
                </div>
            </div>
            <h3 class="checklist-settings-header" id="groupHeader"><span rsf:id="msg=simplepage.group.settings" /></h3>
            <div id="grouplist" rsf:id="grouplist" class="form-group">
                <span rsf:id="group-list-span"/>
                <p rsf:id="msg=simplepage.select-group"></p>
                <div rsf:id="select-group-list:">
                    <input class="form-check-input" type="checkbox" rsf:id="select-group" />
                    <input class="form-check-input" type="checkbox" rsf:id="select-group-checked" checked="checked" />
                    <span rsf:id="select-group-text"></span>
                </div>
            </div>
        </div>

        <span style="display:none;" id="deleteButtonLangSupp" rsf:id="msg=simplepage.delete_page_confirm"></span>
        <p class="act">
            <input id="submitButton" accesskey ="s" rsf:id="save" value="Save" type="submit" class="active" onclick="var title = document.getElementById('name'); if (title) { if (title.value) { SPNR.disableControlsAndSpin( this, null ); }}" />
            <input accesskey ="x" rsf:id="cancel" value="Cancel" type="submit" formnovalidate="formnovalidate" />
            <input type="submit" rsf:id="delete" class="deleteButton" formnovalidate="formnovalidate" />
        </p>
    </form>
</div>
<div rsf:id="dialogDiv" class="dialogs">

  <div id="externalLink-dialog" rsf:id="externalLink-dialog" class="modal fade" tabindex="-1" aria-labelledby="externalLinkModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="externalLinkModalLabel"><span rsf:id="msg=simpleapge.checklist.edit_externalLink"></span></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="sak-banner-info" rsf:id="msg=simplepage.checklist.external.link.info"></div>
          <form action="#" rsf:id="item-picker">
            <div id="list" border="0" role="list" class="checklistList" >
              <h6 rsf:id="msg=simplepage.checklist.external.heading"></h6>
              <div class="hierFlexList checklistList-item" rsf:id="item:" role="listitem">
                <div class="hierFlex1" ><input class="checklistList-radio" name="external-link-radios" type="radio" rsf:id="select" id="select"/> <span rsf:id="name"/></div>
              </div>
            </div>
            <input type="hidden" id="item-id" />
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" id="externalLink-dialog-submit" class="btn btn-link" rsf:id="msg=simplepage.submit">simplepage.submit</button>
          <button type="button" id="externalLink-dialog-close" class="btn btn-link" data-bs-dismiss="modal" rsf:id="msg=simplepage.cancel">simplepage.cancel</button>
        </div>
      </div>
    </div>
  </div>

</div>
<div id="messages" style="display:none;">
    <p rsf:id="msg=simplepage.checklist-name-required" id="simplepage.checklist-name-required"></p>
</div>
<script src="$context/js/checklist.js"></script>
<script>
    checklist.init();
</script>

</body>
</html>
